<template>
  <div class="container">
    <div class="page">
      <!-- Header -->
      <Header />
      <div class="main">
        <Nuxt />
      </div>
      <!-- Footer -->
      <Footer />
    </div>
    <client-only>
      <el-dialog
        :width="componentId === 'Identity' ? '580px' : '445px'"
        :visible.sync="dialogVisible"
        :before-close="dialogClose"
        :show-close="false"
        custom-class="dialog-confirm"
      >
        <component :is="componentId"></component>
      </el-dialog>
    </client-only>
  </div>
</template>

<script>

import { getUser } from '@/utils/cookie';
export default {
  components: {
  },
  data () {
    return {
      dialogVisible: false,
      componentId: ''
    }
  },
  watch: {
    '$store.state.user.showModal' (newObj) { // 展示模态框 - 登录
      !newObj.login && !newObj.register && !newObj.miss && !newObj.identity && !newObj.logout ? this.dialogVisible = false : this.dialogVisible = true;
      newObj.login && (this.componentId = 'Login');
      newObj.register && (this.componentId = 'Register');
      newObj.miss && (this.componentId = 'Miss');
      newObj.identity && (this.componentId = 'Identity');
      newObj.logout && (this.componentId = 'Logout');
    },
    // '$store.state.user.showRegister' (newValue) { // 展示模态框 - 注册
    //   this.componentId = 'Register';
    //   this.dialogVisible = newValue;
    // },
    // '$store.state.user.showMiss' (newValue) { // 展示模态框 - 忘记密码
    //   this.componentId = 'Miss';
    //   this.dialogVisible = newValue;
    // }
  },
  created () {
     if (JSON.stringify(this.$store.state.user.authUser) === '{}') {
      const USER = getUser() || '';
      if (USER) {
        this.$store.dispatch('user/userInfo', JSON.parse(USER));
        // this.userType = JSON.parse(USER).usertype;
      }
    }
  },
  mounted () {
    // window.document.documentElement.setAttribute('data-theme', 'light');
  },
  methods: {
    dialogClose (done) { // 关掉登录模态框
      this.$store.dispatch('user/toggleModal')
      done()
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  font-size: $font-size;
}
::v-deep .el-dialog__wrapper {
  .dialog-confirm {
    border-radius: 10px;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
    }
  }
}
</style>
